<template>
  <div class="scheme-detail-index sub-margin">
    <div class="return-box">
      <div class="return-left">
        <el-button size="small" icon="el-icon-arrow-left" @click.stop="returnOrg">返回</el-button>
        <div class="return-title">{{ formAll.templateName || '新建考核模板' }}</div>
      </div>
      <div class="return-right" v-if="!type">
        <el-button size="small" icon="el-icon-close" @click.stop="onCancel">取消</el-button>
        <el-button type="primary" size="small" icon="el-icon-check" @click.stop="onSave">保存</el-button>
      </div>
    </div>
    <div class="content">
      <div class="detail-title">
        <div v-for="item in titList" :key="item.id" class="title-list">
          <div :class="{ active: step === item.id }" v-if="item.name" @click="changeStep(item)">
            <span :class="item.icon"></span>
            <span>{{ item.name }}</span>
          </div>
          <div v-else class="title-line"></div>
        </div>
      </div>
      <div class="scroll-content">
        <div class="detail-content">
          <BasicInfo
            v-if="step === '0'"
            :indexList="indexList"
            :formData.sync="formAll"
            ref="ref0"
            @reviewData="reviewData"></BasicInfo>
          <ProcessSet v-if="step === '2'" :formData.sync="formAll" ref="ref2" @reviewData="reviewData"></ProcessSet>
          <RuleSet v-if="step === '4'" :formData.sync="formAll" ref="ref4" @reviewData="reviewData"></RuleSet>
        </div>
        <div class="btn-box">
          <el-button type="primary" plain size="small" v-if="step !== '0'" @click="stepSwtich(-2)">上一步</el-button>
          <el-button type="primary" size="small" v-if="step !== '4'" @click="stepSwtich(2)">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@utility/utility'
import BasicInfo from './addEdit/BasicInfo'
import ProcessSet from './addEdit/ProcessSet'
import RuleSet from './addEdit/RuleSet.vue'
import { getDefaultConfig, listAssessModel, saveAssessTemplate, getAssessTemplateDetail } from '@apis/assessModule.js'
import { cloneDeep } from 'lodash'

export default {
  name: 'addEdit',
  components: { BasicInfo, ProcessSet, RuleSet },
  data() {
    return {
      moduleId: '',
      schemeInfo: {},
      schemeForm: {}, // 编辑时使用的数据
      requiredFields: ['templateName', 'modelId'], // 可编辑的必填项
      titList: [
        {
          name: '基本信息',
          id: '0',
          icon: 'el-icon-notebook-2',
        },
        {
          name: '',
          id: '1',
          icon: '',
        },
        {
          name: '考核流程设置',
          id: '2',
          icon: 'el-icon-bangzhu',
        },
        {
          name: '',
          id: '3',
          icon: '',
        },
        {
          name: '考核规则设置',
          id: '4',
          icon: 'el-icon-document',
        },
      ],
      step: '0',
      formAll: {
        checklistObj1: [], // 不参与考核条件
        radioNum: '50', // 病假比例
        monthNum: 3, // 退休时间
        switchLink: '1', // 上级评价是否自动带入下级评价结果
        switchLink1: '1', // 单位管理员是否自动确认考核
        radioLink: '', // 最终考核等次带入
        radioLink1: '', // 等次确认方式
        radioLink2: '', // 等次公示方式
        countRule1: '', // 评价比例配置 一级评价
        countRule2: '', // 评价比例配置 民主测评
        countRule3: '', // 评价比例配置 二级评价
        countRule4: '', // 评价比例配置 加分项
        isDisabled: false,
        templateName: '', // 模板名称
        switchLink2: '1', // 评价过程比例控制
        countRule5: '', // 评价过程比例控制 比例
        countRule6: '', // 等次比例控制
        modelId: '', // 指标模型
        switchLink3: '', // 历史评价结果展示 一级评价
        switchLink4: '', // 历史评价结果展示 二级评价
        assessFlow: '', // 考核流程
        id: '',
        chooseList: ['0', '1', '3', '5', '6'], // 考核流程
      },
      tabData: [],
      indexList: [], // 指标模型列表
      type: '',
    }
  },
  filters: {
    filterDate(val) {
      if (val) {
        return formatDate(new Date(val).toLocaleString(), 'yyyy-MM-dd hh:mm:ss')
      }
      return '-'
    },
  },
  computed: {},
  created() {
    this.type = this.$route.query.type || ''
    this.getIndex()
    const { id = '' } = this.$route.query || {}
    if (id) {
      this.moduleId = id
      this.getDetail()
    } else {
      this.getDefault()
    }
  },
  methods: {
    async getDefault() {
      const { status, data } = await getDefaultConfig()
      if (status === 200 && data && data.length) {
        this.tabData = data
        this.initProcessingData(data)
      }
    },
    async getDetail() {
      if (!this.moduleId) {
        return false
      }
      const { status, data } = await getAssessTemplateDetail(this.moduleId)
      if (status === 200 && data && data.id) {
        this.tabData = data.configList
        this.initProcessingData(data.configList)
        this.formAll.id = data.id
        this.formAll.templateName = data.templateName
        this.formAll.modelId = data.modelId
      }
    },
    // 返回方案列表页
    returnOrg() {
      this.$router.go(-1)
    },
    // 保存更改
    onSave() {
      const str = 'ref' + this.step
      this.$refs[str].toEmit()
    },
    async onUpdate() {
      const param = this.processingData()
      const { status, data } = await saveAssessTemplate(param)
      if (status === 200) {
        this.moduleId = data.id
        this.getDetail()
        this.$message.success('保存成功')
      }
    },
    changeStep(item) {
      const str = 'ref' + this.step
      this.$refs[str].toEmit(item.id)
    },
    stepSwtich(type) {
      const item = {
        id: String(Number(this.step) + type),
      }
      const str = 'ref' + this.step
      this.$refs[str].toEmit(item.id)
    },
    reviewData(data) {
      this.formAll = Object.assign(this.formAll, data)
      if (data.step) {
        this.step = data.step
      } else {
        let flag = true
        this.requiredFields.forEach(item => {
          if (!this.formAll[item]) {
            flag = false
          }
        })
        // 有必填项为空
        if (!flag) {
          return false
        }
        this.onUpdate()
      }
    },
    // 数据处理
    processingData() {
      this.tabData.forEach(item => {
        if (item.busSign === 'NO_ASSESS_CONDITION') {
          // 不参与考核条件
          const arr = [0, 0, 0, 0, 0, 0]
          this.formAll.checklistObj1.forEach(li => {
            arr[Number(li)] = 1
          })
          arr[4] = this.formAll.radioNum
          arr[5] = this.formAll.monthNum
          item.busValue = JSON.stringify(arr)
        } else if (item.busSign === 'PEOPLE_ASSESS') {
          // 选择考核模块  民主测评
          item.busValue = this.formAll.chooseList.includes('0') ? '1' : '0'
        } else if (item.busSign === 'PLUS_MINUS_POINTS') {
          // 选择考核模块   加减分
          item.busValue = this.formAll.chooseList.includes('1') ? '1' : '0'
        } else if (item.busSign === 'MAIN_ASSESS_AUTO_EDIT') {
          // 上级评价是否自动带入下级评价结果
          item.busValue = this.formAll.switchLink
        } else if (item.busSign === 'ADMIN_ASSESS_AUTO_EDIT') {
          // 单位管理员是否自动确认考核
          item.busValue = this.formAll.switchLink1
        } else if (item.busSign === 'FINAL_ASSESS_AUTO_EDIT') {
          // 最终考核等次带入
          item.busValue = this.formAll.radioLink
        } else if (item.busSign === 'RANK_MAKE_SURE_WAY') {
          // 等次确认方式
          item.busValue = this.formAll.radioLink1
        } else if (item.busSign === 'RANK_SHOW_WAY') {
          // 等次公示方式
          item.busValue = this.formAll.radioLink2
        } else if (item.busSign === 'CALC_RULE') {
          // 评价比例配置
          const arr = [0, 0, 0, 0]
          arr[0] = this.formAll.countRule1 / 100
          arr[1] = this.formAll.countRule2 / 100
          arr[2] = this.formAll.countRule3 / 100
          arr[3] = this.formAll.countRule4 / 100
          item.busValue = JSON.stringify(arr)
        } else if (item.busSign === 'ASSESS_FLOW') {
          // 考核流程
          item.busValue = this.formAll.assessFlow
        } else if (item.busSign === 'FIRST_ASSESS_SHOW_HISTORY') {
          // 历史评价结果展示 一级评价
          item.busValue = this.formAll.switchLink3
        } else if (item.busSign === 'SECOND_ASSESS_SHOW_HISTORY') {
          // 历史评价结果展示 二级评价
          item.busValue = this.formAll.switchLink4
        } else if (item.busSign === 'RANK_LIMIT_STATUS') {
          // 评价过程比例控制
          item.busValue = this.formAll.switchLink2
        } else if (item.busSign === 'RANK_LIMIT') {
          // 评价过程比例控制 比例
          item.busValue = this.formAll.countRule5
        } else if (item.busSign === 'RANK_CONFIRM_LIMIT') {
          // 等次比例控制
          item.busValue = this.formAll.countRule6
        }
      })
      const params = {
        configList: cloneDeep(this.tabData),
        templateName: this.formAll.templateName,
        modelId: this.formAll.modelId,
        id: this.formAll.id,
      }
      return params
    },
    getIndex() {
      listAssessModel({
        modelState: '1',
        modelStr: '',
        productId: '',
      }).then(res => {
        const { status, data } = res
        if (status === 200 && data && data.length) {
          this.indexList = data
        }
      })
    },
    initProcessingData(data) {
      data.forEach(item => {
        if (item.busSign === 'NO_ASSESS_CONDITION') {
          // 不参与考核条件
          const arr = JSON.parse(item.busValue)
          for (let i = 0; i < 4; i++) {
            if (arr[i] > 0) {
              this.formAll.checklistObj1.push(String(i))
            }
          }
          // this.formAll.radioNum = arr[4]
          this.formAll.monthNum = arr[5]
        } else if (item.busSign === 'PEOPLE_ASSESS') {
          // 选择考核模块  民主测评
          if (item.busValue === '1') {
            this.formAll.chooseList.push('2')
          }
        } else if (item.busSign === 'PLUS_MINUS_POINTS') {
          // 选择考核模块   加减分
          if (item.busValue === '1') {
            this.formAll.chooseList.push('4')
          }
        } else if (item.busSign === 'MAIN_ASSESS_AUTO_EDIT') {
          // 上级评价是否自动带入下级评价结果
          this.formAll.switchLink = item.busValue
        } else if (item.busSign === 'ADMIN_ASSESS_AUTO_EDIT') {
          // 单位管理员是否自动确认考核
          this.formAll.switchLink1 = item.busValue
        } else if (item.busSign === 'FINAL_ASSESS_AUTO_EDIT') {
          // 最终考核等次带入
          this.formAll.radioLink = item.busValue
        } else if (item.busSign === 'RANK_MAKE_SURE_WAY') {
          // 等次确认方式
          this.formAll.radioLink1 = item.busValue
        } else if (item.busSign === 'RANK_SHOW_WAY') {
          // 等次公示方式
          this.formAll.radioLink2 = item.busValue
        } else if (item.busSign === 'CALC_RULE') {
          // 评价比例配置
          const arr = JSON.parse(item.busValue)
          this.formAll.countRule1 = arr[0] * 100
          this.formAll.countRule2 = arr[1] * 100
          this.formAll.countRule3 = arr[2] * 100
          this.formAll.countRule4 = arr[3] * 100
        } else if (item.busSign === 'ASSESS_FLOW') {
          // 考核流程
          this.formAll.assessFlow = item.busValue
        } else if (item.busSign === 'FIRST_ASSESS_SHOW_HISTORY') {
          // 历史评价结果展示 一级评价
          this.formAll.switchLink3 = item.busValue
        } else if (item.busSign === 'SECOND_ASSESS_SHOW_HISTORY') {
          // 历史评价结果展示 二级评价
          this.formAll.switchLink4 = item.busValue
        } else if (item.busSign === 'RANK_LIMIT_STATUS') {
          // 评价过程比例控制
          this.formAll.switchLink2 = item.busValue
        } else if (item.busSign === 'RANK_LIMIT') {
          // 评价过程比例控制 比例
          this.formAll.countRule5 = item.busValue
        } else if (item.busSign === 'RANK_CONFIRM_LIMIT') {
          // 等次比例控制
          this.formAll.countRule6 = item.busValue
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.scheme-detail-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .return-box {
    margin-top: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4eaf0;
    padding-bottom: 20px;
    .return-left {
      display: flex;
      align-items: center;
      .return-title {
        font-size: 20px;
        font-weight: bold;
        margin-left: 20px;
      }
    }
  }
  .content {
    flex: 1;
    padding: 20px 0;
    margin-top: 10px;
    .detail-title {
      font-size: 18px;
      line-height: 28px;
      margin-bottom: 20px;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: #2b78f1;
      }
      span {
        margin: 0 5px;
        cursor: pointer;
        &:first-child {
          font-size: 25px;
        }
      }
      .title-line {
        height: 1.5px;
        width: 150px;
        background-color: #e4eaf0;
        margin: 0 10px;
      }
    }

    .scroll-content {
      height: calc(100vh - 300px);
      width: 100%;
    }

    .detail-content {
      min-width: 640px;
      max-width: 1250px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #e4eaf0;
      border-radius: 20px;
      padding: 20px 50px;
      height: 100%;
      &-desc {
        width: 100%;
      }
      ::v-deep .el-descriptions-item__label {
        min-width: 160px;
      }
      ::v-deep .el-descriptions-item__content {
        .el-tag {
          margin: 5px 0;
        }
        .el-tag + .el-tag {
          margin-left: 10px;
        }
        .form-item {
          &.error-form-item {
            input {
              border-color: #f56c6c;
            }
            .empty-tips {
              position: relative;
              top: 2px;
              font-size: 12px;
              line-height: 1;
              color: #f56c6c;
            }
          }
        }
      }
    }
    .btn-box {
      margin-top: 10px;
      text-align: center;
      .el-button {
        margin: 0 20px;
      }
    }
  }
}
</style>
